<template>
	<div class="content" style="height: 100%">
		<header>
			<div>
				<div class="img">
					<img src="../assets/avatar.76a75b8f17.png" alt="">
				</div>
				<div class="name" v-text="!login ? '注册/登录':name" @click="clickLink"></div>
			</div>
		</header>
		<div class="order">
			<div class="cite" v-text="`我的订单`">

			</div>
			<div class="citeAll" v-text="`全部订单`">

			</div>
		</div>
		<ul class="b2" v-if="isInit">
			<li v-for="(text,i) in text" :class="i === 0 ? 'dfk' :(i === 1? 'dah':'thx')" @click="linkOrderList(i)">
				<a>
					<div class="icon"></div>
					<span v-text="text"></span>
					<template v-if="i === 0">
						<em v-show="beforePayment.length" v-text="beforePayment.length"></em>
					</template>
					<template v-else-if="i === 1">
						<em v-show="afterPayment.length" v-text="afterPayment.length"></em>
					</template>
				</a>
			</li>
		</ul>
		<div class="ui-line"></div>
		<ul class="items">
			<li class="i-member">
				<router-link to="" v-text="`会员中心`">

				</router-link>
			</li>
			<li class="i-wallet">
				<router-link to="" v-text="`我的优惠`">

				</router-link>
			</li>
		</ul>
		<div class="ui-line"></div>
		<ul class="items">
			<li class="i-service">
				<router-link to="" v-text="`服务中心`">

				</router-link>
			</li>
			<li class="i-mihome">
				<router-link to="" v-text="`小米之家`">

				</router-link>
			</li>
		</ul>
		<div class="ui-line"></div>
		<ul class="items">
			<li class="i-fcode">
				<router-link to="" v-text="`F码通道`">

				</router-link>
			</li>
			<li class="">
				<router-link :to="login?'/profile/set':''" v-text="`设置`"></router-link>
			</li>
		</ul>
		<div class="ui-line"></div>
		<menus></menus>
	</div>
</template>
<script type="text/ecmascript-6">
	import menus from "../components/MenusSlot"
    import {createNamespacedHelpers} from "vuex";//映射仓库
    const {mapState,mapGetters} = createNamespacedHelpers("profile");//mapState放在计算属性//const声明常量
    export default {
		components:{
            menus
		},
	    data(){
		    return {
				login:false,//判断是否登录
			    name:null,
				text:["待付款","待收货","退换修"]
		    }
	    },
	    computed:{
		    ...mapState(["list","isInit"]),
		    ...mapGetters(["beforePayment","afterPayment"]),
        },
	    methods:{
            isLogin(){//判断用户是否登录
                let cookie = document.cookie.split(";");
                if(cookie.length){
                    for(let i = 0; i < cookie.length; i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo") {
                            this.name = arr[1];
                            this.login = true;
                        }
                    }
                }
            },
            clickLink(){
               if(!this.login) {
                   this.$router.push({path:'/login',query: {router: this.$route.path}})
               }
            },
		    linkOrderList(i){
                this.$router.push({
	                path:"/order/list",
	                query:{
	                    i,
	                }
                });
		    }
	    },

        /*组件创建后*/
        created(){},
	    mounted(){},
	    /*--------------组件激活--------------*/
        activated(){
            this.isLogin();
			this.$store.dispatch("profile/init",this.name);
        },
        /*---------------离开----------------*/
        deactivated(){

        },

    };

</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

	header
		background: url(../assets/bg.63c8e19851.png) center 0 #f37d0f;
		background-size: auto 100%;
		padding: .32rem 0
		div
			-webkit-box-align: center
			-webkit-align-items: center
			align-items: center
			display: flex
			.img
				margin: 0 .16rem 0 .32rem
				width: .96rem
				height: .96rem
				overflow: hidden
				box-sizing: border-box
				border-radius: 100%
				border: 0.03rem solid hsla(0,0%,100%,.4)
				text-align: center
				img
					width 100%
			.name
				color: #fff
				font-size: .24rem
				text-align: left
	.order
		background-color: #fff;
		height: .8rem;
		border-bottom: 1px solid rgba(0,0,0,.15);
		color: rgba(0,0,0,.54);
		position: relative;
		padding-right: .56rem
		display: flex
		align-items center
		justify-content: space-between
		.cite
			font-size: .28rem;
			padding: 0 0 0 .32rem;
			color: rgba(0,0,0,.87)
		.citeAll
			font-size: .24rem;
			color: rgba(0,0,0,.87)
		.citeAll:after
			content: "";
			position: absolute;
			right: .32rem;
			top: 50%;
			width: .2rem;
			height: .2rem;
			border-left: 1px solid currentColor;
			border-top: 1px solid currentColor;
			transform: translate3d(0,-50%,0) rotate(135deg);
			-webkit-transform: translate3d(0,-50%,0) rotate(135deg)
	.b2
		padding: 0 .8rem;
		background-color: #fff
		display flex
		justify-content: space-between
		align-items: center
		li
			align-content: space-between;
			position: relative;
			padding: .2rem 0
			display: flex
			.icon
				width: .48rem;
				height: .48rem;
				margin: 0 auto .16rem
				background-size: cover !important
			em
				position: absolute;
				min-width: .28rem;
				line-height: .28rem;
				height: .28rem;
				box-sizing: border-box;
				padding: 0 .05rem;
				font-size: .18rem;
				overflow: hidden;
				text-align: center;
				border-radius: .28rem;
				background: #ed4d41;
				color: #fff;
				top: 50%;
				left: 50%;
				right: auto;
				-webkit-transform: translate3d(.1rem,-200%,0);
				transform: translate3d(.1rem,-200%,0);
				font-style: normal;
		.thx
			.icon
				background url("../assets/nav-4.d68723895f.png");
		.dah
			.icon
				background url('')
		.dfk
			.icon
				background url('') no-repeat center 0
	.ui-line
		height: .2rem;
		background: #f5f5f5;
		overflow: hidden;
		clear: both
	.items
		background: #fff
		li
			position: relative;
			color: rgba(0,0,0,.54);
			background: url('../assets/i-setting.fb9625b3f2.png') no-repeat .32rem;
			background-size: .48rem auto;
			border-bottom: 1px solid rgba(0,0,0,.15);
			line-height: 0
			a
				padding-right: .56rem;
				padding-left: 1.12rem;
				height: 1.04rem;
				display: box;
				display: -webkit-box;
				box-align: center;
				-webkit-box-align: center;
				box-pack: justify;
				-webkit-box-pack: justify;
				color: currentColor
			a:after
				content: "";
				position: absolute;
				right: .32rem;
				top: 50%;
				width: .2rem;
				height: .2rem;
				border-left: 1px solid currentColor;
				border-top: 1px solid currentColor;
				transform: translate3d(0,-50%,0) rotate(135deg);
				-webkit-transform: translate3d(0,-50%,0) rotate(135deg);
		.i-fcode
				background-image url('')
		.i-mihome
				background-image url('')
		.i-service
				background-image url('')
		.i-wallet
				background-image url('')
		.i-member
				background-image  url("")



</style>